import React, { useState, useRef } from "react";
import "./rollregion.less";
import { debounce } from "lodash";

const RollRegion: React.FC = () => {
  const scrollRef = useRef<HTMLDivElement>(null);
  const [clientHeight, setClientHeight] = useState<number>(0);
  const [scrollTop, setScrollTop] = useState<number>(0);
  const [scrollHeight, setScrollHeight] = useState<number>(0);

  const onScroll = () => {
    console.log(scrollRef);
    if (scrollRef?.current) {
      const clientHeight = scrollRef.current.clientHeight; // 可视区域高度
      const scrollTop = scrollRef.current.scrollTop; // 滚动条高度
      const scrollHeight = scrollRef.current.scrollHeight; // 滚动内容高度

      setClientHeight(clientHeight);
      setScrollTop(scrollTop);
      setScrollHeight(scrollHeight);
    }
  };

  return (
    <>
      <p>可视区域高度：{clientHeight}</p>
      <p>滚动条高度：{scrollTop}</p>
      <p>滚动内容高度：{scrollHeight}</p>
      <div className="scroll-container" ref={scrollRef} onScroll={debounce(onScroll, 3000)}>
        <p className="scroll-content"></p>
      </div>
    </>
  );
};
export default RollRegion;
